<template>
	<view class="infochange">
		<view class="header">
			<view class="cancle">
				取消
			</view>
			<view class="info">
				签名
			</view>
			<view class="decide">
				确定
			</view>
		</view>
		<view class="container">
			<textarea class="info oldinfo" v-show="flag" placeholder="原密码" maxlength="8"></textarea>
			<textarea class="info newinfo" placeholder="修改内容"></textarea>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag:true
			};
		}
	}
</script>

<style lang="scss">
.infochange{
	position: fixed;
	top: 0;
	bottom: 0;
	width: 100%;
	.header{
		position: absolute;
		height: 120rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 36rpx;
		.cancle{
			width: 80rpx;
			flex: 0 0 80rpx;
			line-height: 120rpx;
			text-align: center;
			color: rgba(74, 71, 71, 100);
			font-size: 36rpx;
			font-weight: bold;
		}
		.info{
			flex: 1;
			text-align: center;
			color: rgba(74, 71, 71, 100);
			font-size: 56rpx;
			font-weight: bold;
			line-height: 120rpx;
		}
		.decide{
			width: 80rpx;
			line-height: 120rpx;
			flex: 0 0 80rpx;
			text-align: center;
			color: rgba(0, 122, 255, 100);
			font-weight: bold;
			font-size: 36rpx;
		}
	}
	.container{
		position: absolute;
		top: 120rpx;
		bottom: 0;
		width: 100%;
		padding: 42rpx 72rpx;
		box-sizing: border-box;
		.info{		
			box-sizing: border-box;
			width: 100%;
			border-radius: 24rpx;
			background-color: rgba(229, 229, 234, 100);
			border: 2rpx solid rgba(187, 187, 187, 100);
			padding: 10rpx 44rpx;
			color: rgba(74, 71, 71, 100);
			font-size: 32rpx;
			margin-bottom: 36rpx;
			color: rgba(74, 71, 71, 100);
			font-size: 36rpx;
			
			line-height: 36rpx;
			&.oldinfo{
				height: 62rpx;
			}
			&.newinfo{
				height: 600rpx;
			}
		}
	}
}
</style>
